<template>
  <div>
    <div class="tie2">
      <div class="tie">
        <form>
          <input type="hidden" value="products-all" />
          <label for="disp-order-sorter">Sort:by</label>
          <select name="disp-order" id="disp-order-sorter">
            <option value="1" selected="selected">Product-Name</option>
            <option value="2">Product-Name</option>
            <option value="3">Product-Name</option>
            <option value="4">Product-Name</option>
            <option value="5">Product-Name</option>
            <option value="6">Product-Name</option>
            <option value="7">Product-Name</option>
          </select>
        </form>
      </div>
      <span class="d1">Displaying 1 to 3 (of 20 products)</span>
      <div class="xx">
        <a href=""><img style="width: 332px; height: 221px; margin-top: 20px" src="../assets/img/sc-nbfsgk1.jpg"
            alt="" /></a>
        <div class="xx1">
          <h3 style="padding:5px">上架日期: 2022-03-25</h3>
          <hr />
          <h3 style="padding:5px"><a href="">南部方酥锅盔</a></h3>
          <hr />
          <h4 style="padding:5px"><a href="">方酥锅盔，酥脆化渣</a></h4>
          <span style="padding:5px"><strong>制造商：</strong>刘锅盔总店</span><br />
          <span style="padding:5px"><strong>产地：</strong>四川南充南部县</span><br />
          <span style="padding:5px ">价格：</span>
          <span style="color: #008180; font-size: 13px; font-weight: bold">￥9.0</span>&nbsp;<span
            style="text-decoration: line-through">原价.￥10.0</span><br />
          <a href="" style="color: #fe6847; text-decoration: none; font-size: 0.8125em;padding:5px">了解详情</a><br />
          <h5 style="margin-left: -340px; margin-top: 25px; color: #333333">
            商品描述:
          </h5>
          <br />
          <p style="
              font-size: 12px;
              color: #6b6b6b;
              margin-left: -340px;
              margin-top: -15px;
            ">
            在南部县几乎走两步就会遇到打锅盔的店，锅盔的香味总是诱惑着过往的行人，而在乐群路的这一家的锅盔店有着七八十年的历史，祖孙三代都靠着打锅盔的手艺生活，可以说是代表了南部的老味道。
          </p>
        </div>
      </div>
      <div class="dd">
        <a href=""><strong class="d1">1</strong></a>
        &nbsp;&nbsp;
        <a href="" class="d2">2</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.tie2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 20px;
}

.tie {
  display: block;
  padding: 15px 20px;
  background: #fe6847;
  margin-bottom: 20px;
}

.d1 {
  font-size: 16px;
  color: #6b6b6b;
}

.xx {
  width: 1140px;
  height: 400px;
  position: relative;
}

.xx1 {
  width: 642px;
  height: 211px;
  float: right;
  margin-right: 145px;
  line-height: 150%;
  margin-top: 15px;
  position: relative;
}

.xx3 {
  width: 1140px;
  height: 309px;
  position: relative;
}

.xx1>h3 a {
  font-size: 13.6px;
  color: #6b6b6b;
  text-decoration: none;

}

.xx1>h4 a {
  font-size: 13.6px;
  color: #6b6b6b;
  text-decoration: none;
  margin-top: 10px;
}

.xx1>h3 {
  color: #6b6b6b;
  font-size: 13.6px;
}

.xx1>span {
  font-size: 13.6px;
  color: #6b6b6b;
}

.dd {
  margin-top: 25px;
  margin-right: 290px;
  float: right;
}

.dd .d1 {
  background-color: #fe6847;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
}

.dd .d2 {
  background-color: #c2be67;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
}
</style>
